<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
       section{
           width: 400px;
           height:660px;
           margin:100px auto;
           /* background-color:red; */
           padding:5px;
       }
       ul{
           margin:0px;
           padding:0px;
           list-style: none;
       }
       li{
           float:left;
           width:128px;
           height:128px;
           /* background-color:green; */
           margin-left:5px;
           margin-bottom: 5px;
       }
       .first{
           width:261px;
           height:261px;
       }
        img{
           width:100%;
       }
    </style>
</head>
<body>
<section>
   <ul>
      <li class="first"><img src="img/big_1.jpg" alt="" data-xxx='0'></li>
      <li><img src="img/small_1.jpg" alt="" data-xxx='0'></li>
      <li><img src="img/small_2.jpg" alt="" data-xxx='1'></li>
      <li><img src="img/small_3.jpg" alt="" data-xxx='2'></li>
      <li><img src="img/small_4.jpg" alt="" data-xxx='3'></li>
      <li><img src="img/small_5.jpg" alt="" data-xxx='4'></li>
      <li><img src="img/small_6.jpg" alt="" data-xxx='5'></li>
      <li><img src="img/small_7.jpg" alt="" data-xxx='6'></li>
      <li><img src="img/small_8.jpg" alt="" data-xxx='7'></li>
      <li><img src="img/small_9.jpg" alt="" data-xxx='8'></li>
      <li><img src="img/small_10.jpg" alt="" data-xxx='9'></li>
      <li><img src="img/small_11.jpg" alt="" data-xxx='10'></li>
   </ul>
</section>
</body>
</html>
<script>
    var imgs = document.querySelectorAll('img')
    var first = document.querySelector('.first img')
    var arr = ['img/big_1.jpg','img/big_2.jpg','img/big_3.jpg',
    'img/big_4.jpg','img/big_5.jpg','img/big_6.jpg',
    'img/big_7.jpg','img/big_8.jpg','img/big_9.jpg',
    'img/big_10.jpg','img/big_11.jpg'];
    for(var i = 0; i < imgs.length; i++){
        imgs[i].index = i;
        imgs[i].onmouseover = function(){
            first.src = arr[this.dataset.xxx];
        }
    }

</script>